<template>
  <div>
    <el-carousel :interval="10000" height="100vh">
      <el-carousel-item class="login-wrapper"
                        :style="{'background-image': 'url('+ back +')'}"
                        v-for="back in backs"
                        :key="back">

      </el-carousel-item>
    </el-carousel>
    <el-form ref="form" v-enter="toLogin"
             class="login-form-wrapper" inline :model="loginInfo" @submit="toLogin">
      <el-form-item prop="username" :rules="[required]">
        <el-input prefix-icon="user" class="login-form-left-input" placeholder="请输入用户名"
                  v-model="loginInfo.username"
                  :rules="[required]" v-focus round size="large" tabIndex="1" autocomplete="new-password"/>
      </el-form-item>

      <el-form-item prop="password" :rules="[required]">
        <el-input prefix-icon="lock" class="login-form-left-input" placeholder="请输入密码"
                  v-model="loginInfo.password" type="password" round
                  :rules="[required]" size="large" tabIndex="2" autocomplete="new-password"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="toLogin" :loading="loading" round style="width: 200px;" size="large">登录
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<el-icon>
<Lock/>
</el-icon>
<script>
import {postAction} from '@/request/BaseRequest';
import {required} from '@/utils/CommonUtils';
import back from '@/assets/login/login-back.jpg';
import back1 from '@/assets/login/login-back1.jpg';

export default {
  name: 'Login',
  data() {
    return {
      backs: [
        back,
        back1
      ],
      loading: false,
      loginInfo: {
        username: undefined,
        password: undefined,
      },
      required,
    };
  },
  methods: {
    input() {
      console.log('sadf');
    },
    toLogin() {
      this.$refs.form.validate((valid, errors) => {
        if (valid) {
          this.loading = true;
          postAction('/sys/login', this.loginInfo).then(data => {
            if (data.success) {
              this.$store.dispatch("user/setUserInfo", data.result);
              this.$store.dispatch("app/loadMenus");
              this.$router.push('/');
              this.$message.success('欢迎回来');
            } else {
              this.$notification.error({message: data.message, duration: 3});
            }
            this.loading = false;
          }).catch(error => {
            console.log(error);
            this.loading = false;
            this.$notification.error({message: JSON.stringify(error), duration: 3});
          });
        }
      });
    },
  }
};
</script>

<style scoped>
.login-wrapper {
  position: fixed;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background-size: auto;
  background-position: center center;
  background-repeat: no-repeat;
}

.login-form-wrapper {
  width: 100vw;
  display: flex;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  align-items: center;
  justify-content: center;
  padding-bottom: 50px;
}

</style>

<style>
.login-form-wrapper .el-input__wrapper {
  border-radius: 1000px;
  opacity: 0.8;
}

.login-form-wrapper .el-input__wrapper:hover,
.login-form-wrapper .is-focus {
  opacity: 1 !important;
}

.login-form-wrapper .el-input__prefix {
  color: #409eff;
}
</style>